<template>
  <el-dialog v-model="dialogVisible" title="修改密码" width="500px" draggable>
    <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordFormRules" label-width="100px">
      <el-form-item label="原密码 " prop="oldPassword">
        <el-input v-model="passwordForm.oldPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="新密码 " prop="newPassword">
        <el-input v-model="passwordForm.newPassword" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input v-model="passwordForm.confirmPassword" show-password></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitForm(passwordFormRef)">保存</el-button>
        <el-button @click="resetForm(passwordFormRef)">重置</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { ElMessage, type FormInstance, type FormRules } from "element-plus";
import { useUserStore } from "@/stores/modules/user";
import { changeUserPassWord } from "@/api/modules/user";
import md5 from "js-md5";

const userStore = useUserStore();

const passwordFormRef = ref<FormInstance>();
const passwordForm = reactive({
  oldPassword: "",
  newPassword: "",
  confirmPassword: ""
});

const passwordFormRules = reactive<FormRules>({
  oldPassword: [{ required: true, message: "请输入旧密码", trigger: "blur" }],
  newPassword: [
    { required: true, message: "请输入新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value === passwordForm.oldPassword) {
          callback(new Error("新密码不能与原密码相同"));
        } else if (value.length < 6) {
          // 添加密码长度限制，这里是限制为不少于 6 位
          callback(new Error("新密码长度不能少于 6 位"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ],
  confirmPassword: [
    { required: true, message: "请再次输入新密码", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error("两次输入密码不一致"));
        } else {
          callback();
        }
      },
      trigger: "blur"
    }
  ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      try {
        const params = ref({
          userId: userStore.userInfo.userId ?? 0,
          oldPassword: md5(passwordForm.oldPassword),
          newPassword: md5(passwordForm.newPassword)
        });
        await changeUserPassWord(params.value);
        //向后端发送请求
        dialogVisible.value = false;
        ElMessage.success({ message: `密码修改成功` });
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("error submit!", fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const dialogVisible = ref(false);
const openDialog = () => {
  dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>
